<!DOCTYPE html>
<html>
<head>
	<title>运维管理平台</title>

        <!--{% load staticfiles %}-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="{% static  'css/bootstrap.min.css' %}" rel="stylesheet">
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
</head>
<body style="background-color:#edeff1;">
				<div class="login-div-center" style="padding: 100px 400px;">
					<form class="form-horizontal login-form" role="form">
						<div class="form-group" style="width: 800px;">
							 <label for="inputUsername" class="col-sm-3 control-label">用户名:</label>
							<div class="col-sm-2">
								<input type="text" class="form-control" id="inputUsername" name="username" required />
							</div>
						</div>
						<div class="form-group" style="width: 800px;">
							 <label for="inputPassword" class="col-sm-3 control-label">密&nbsp&nbsp&nbsp&nbsp码:</label>
							<div class="col-sm-2">
								<input type="password" class="form-control" id="inputPassword" name="password" required />
							</div>
						</div>
						<hr/>
						<div class="form-group" style="width: 800px;">
							<div class="col-sm-offset-3 col-sm-10">
								 <button class="btn btn-primary" id="btnLogin" type="button">登录</button>
							</div>
						</div>
					</form>
				</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="wrongpwd-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					提示
				</h4>
			</div>
			<div class="modal-body" id="wrongpwd-modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">确定
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

	<!--底部部分 -->
	<!--<div class="row clearfix user-bottom-div">-->
		<!--<p><strong>自动化运维平台.</strong>&nbsp; Developed by OP.</p>-->
	<!--</div>-->
<!--</div>-->
</body>

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>



<script>

  //回车键提交表单登录
$(document).ready(function() {
	$(document).keydown(function(event) {
		//keycode==13为回车键
		if (event.keyCode == 13) {
			authenticateUser();
		}
	});
});

$('#btnLogin').click(function(){
	authenticateUser();
});

function authenticateUser() {
	var inputUsername = $('#inputUsername');
	var inputPassword = $('#inputPassword');
    $.ajax({
        type: "post",
        url: "/accounts/login/",
        dataType: "json",
        data: {
			username: inputUsername.val(),
            password: inputPassword.val()
        },
        complete: function () {
        },
        success: function (data) {
			if (data.code == 0) {
			        location.href=data.next_url;
			} else {
				$('#wrongpwd-modal-body').html(data.msg);
				$('#wrongpwd-modal').modal({
        			keyboard: true

    			});
			}
		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
        }
    });
};


</script>

</html>
